<template>
<div class="msg-item">
 <div class="mgs-tip">
   <slot></slot>
 </div>
 <div>
   <slot name="btn"></slot>
   <slot name="switch">
     <el-switch v-model="value" :active-value="1" :inactive-value="0" @change="changeSwitch"></el-switch>
   </slot>
 </div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  name: 'msgItem',
  components: {
  }
})
export default class extends Vue {
  @Prop({ default: 0 }) private value!: any
  @Prop({ default: () => ({}) }) private item!: object
  private changeSwitch (value: any) {
    this.$emit('changeStatus', this.item)
  }
}
</script>
<style lang="stylus" scoped>
.mgs-tip {
  max-width: calc(100vw - 700px);
  word-break: break-word;
}
.msg-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #E7E9ED;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
</style>
